<template>
  <a-layout class="layout">
    <a-layout-header style="background-color:#f5f5f5"></a-layout-header>
    
    <a-layout-content style="padding: 0 50px; width: 100%; height: 98%">
      <a-select
        placeholder="请选择学院"
        style="width: 200px"
      >
        <a-select-option value="软件学院">软件学院</a-select-option>
      </a-select>
      <a-input-search
        placeholder="请输入院系名称"
        enter-button
        style="width: 200px; margin-left: 10px; margin-bottom: 20px"
      ></a-input-search>
      <div style="border-radius: 4px; background-color: #20b0fc; width: 90%; height: 90px; color: #ffffff; font-size: 20px; text-align: center; padding: 20px">
        <CarryOutOutlined />任务提交情况：<a-slider v-model:value="inputValue1" :min="1" :max="100" style="width: 500px; display: inline-block" />{{ inputValue1 }}
      </div>
      <div style="display: flex; justify-content: space-between; width: 80%; text-align: center">
        <h2 style="margin-top: 15px;">全部学生名单</h2>
        <a-button
          type="link"
          style="background-color: #38b5e3; margin: 20px; color: #ffffff;"
          @click="exportToExcel"
        >
          导出成绩
        </a-button>
      </div>
      
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="formattedData"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
        :pagination="false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a style="color: #139bd5;" @click="showDetails(record)">详情</a>
          </template>
        </template>
      </a-table>
    </a-layout-content>
    
    <a-layout-footer style="text-align: center; color: #ffffff; background-color: #0e6eb8">
      版权所有：河北师范大学顶岗支教指导中心
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { CarryOutOutlined } from '@ant-design/icons-vue';
import * as XLSX from 'xlsx';

const inputValue1 = 40;

// 数据
const data = ref([
  {
    collegeName: "软件学院",
    groupName: "yjc-实习小组(7期)",
    majorName: "软件工程",
    studentName: "张三",
    studentNum: "student004",
    operation: "详情"
  },
  {
    collegeName: "软件学院",
    groupName: "yjc-实习小组(7期)",
    majorName: "软件工程",
    studentName: "张三",
    studentNum: "student003",
    operation: "详情"
  },
  {
    collegeName: "软件学院",
    groupName: "yjc-实习小组(7期)",
    majorName: "软件工程",
    studentName: "张三",
    studentNum: "student002",
    operation: "详情"
  },
  {
    collegeName: "软件学院",
    groupName: "yjc-实习小组(7期)",
    majorName: "软件工程",
    studentName: "张三",
    studentNum: "student001",
    operation: "详情"
  },
  {
    collegeName: "软件学院",
    groupName: "yjc-实习小组(7期)",
    majorName: "软件工程",
    studentName: "yjc",
    studentNum: "1006",
    operation: "详情"
  }
]);

// 表格列定义
const columns = [
  { title: '学号', dataIndex: 'studentNum', key: 'studentNum' },
  { title: '实习小组名称', dataIndex: 'groupName', key: 'groupName' },
  { title: '姓名', dataIndex: 'studentName', key: 'studentName' },
  { title: '院系', dataIndex: 'collegeName', key: 'collegeName' },
  { title: '专业', dataIndex: 'majorName', key: 'majorName' },
  { title: '操作', dataIndex: 'operation', key: 'operation' }
];

// 操作相关
const state = reactive({
  selectedRowKeys: [],
  batchDeleting: false
});

const hasSelected = computed(() => state.selectedRowKeys.length > 0);

const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};

// 格式化数据以匹配表格数据源的要求
const formattedData = computed(() => {
  return data.value.map(item => ({
    ...item,
    key: item.studentNum // 添加 key 字段以便表格正确渲染每一项
  }));
});

// 导出 Excel 函数
const exportToExcel = () => {
  const worksheet = XLSX.utils.json_to_sheet(data.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '数据');
  
  const filename = `学生成绩_${Math.floor(Date.now() / 1000)}.xlsx`;
  XLSX.writeFile(workbook, filename);
};
</script>

<style scoped>
.layout {
  min-height: 100vh;
  width: 100vw;
}
</style>

